<template>
	<view class="page-container">
		<uni-section title="编辑司机信息" type="line">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" label-position="top">

					<uni-forms-item label-width="150rpx" label="手机号" required name="mobile">
						<uni-easyinput disabled v-model="valiFormData.mobile" placeholder="请输入手机号" />
					</uni-forms-item>

					<uni-forms-item label-width="150rpx" label="姓名" required name="username">
						<uni-easyinput disabled v-model="valiFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>

					<uni-forms-item label-width="150rpx" label="车型" required name="model">
						<uni-easyinput v-model="valiFormData.model" placeholder="请输入车型" />
					</uni-forms-item>

					<uni-forms-item label-width="150rpx" label="车牌" required name="license">
						<uni-easyinput v-model="valiFormData.license" placeholder="请输入车牌" />
					</uni-forms-item>

					<uni-forms-item label-width="150rpx" label="状态" required name="status">
						<uni-data-select placement="top" placeholder="请选择" :localdata="statuslist" v-model="valiFormData.status"
							@change="change" />
					</uni-forms-item>

				</uni-forms>

				<button class="submit-btn" @click="submit('valiForm')">提交修改</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				_id: '',
				statuslist: [{
					value: 0,
					text: '空闲'
				}, {
					value: 1,
					text: '出车'
				}, {
					value: 2,
					text: '车辆故障'
				}, {
					value: 3,
					text: '留置点'
				}, {
					value: 4,
					text: '请假'
				}],
				valiFormData: {
					mobile: '',
					name: '',
					license: '',
					model: '',
					status: null,
				},
				rules: {
					license: {
						rules: [{
							required: true,
							errorMessage: '车牌不能为空'
						}, {
							minLength: 2,
							errorMessage: '车牌必须2个字以上'
						}, ]
					},
					model: {
						rules: [{
							required: true,
							errorMessage: '车型不能为空'
						}, {
							minLength: 2,
							errorMessage: '车型必须2个字以上'
						}, ]
					},
					status: {
						rules: [{
							required: true,
							errorMessage: '请选择一个状态'
						}]
					}
				},
			}
		},
		mounted() {
			this._id = uni.$router.params._id
			this.getdriver(uni.$router.params._id)
		},
		methods: {
			async getdriver() {
				const obj = uniCloud.importObject('driver')
				const res = await obj.getDriverById({
					_id: this._id
				}).then(res => {
					if (res.code == 0) {
						this.dataforeach(this.valiFormData, res.data)
					} else {
						uni.showToast({
							title: '数据异常',
							icon: 'error'
						})
					}
				})
			},
			dataforeach(data, res) {
				Object.keys(data).forEach(key => {
					if (key in res) {
						this.valiFormData[key] = res[key]
					}
				})
			},
			change(e) {
				this.valiFormData.status = e.value
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					const obj = uniCloud.importObject('driver')
					let event = {
						_id: this._id,
						data: this.valiFormData
					}
					const d = obj.updateDriverInfo(event).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.message,
								icon: 'success'
							})
							// 延迟跳转，给toast显示时间
							setTimeout(() => {
								uni.$router.to('pagesA/driver/list')
							}, 1000)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}).catch(err => {
					//console.error('完整验证错误信息:', err)
				})
			},
		}
	}
</script>

<style lang="scss">
	// 页面整体背景
	page {
		background: linear-gradient(135deg, #e6f7ff, #f0f8ff);
		min-height: 100vh;
		box-sizing: border-box;
	}

	.page-container {
		padding: 20rpx;
	}

	// 卡片容器
	.uni-section {
		margin: 0;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 105, 204, 0.1);
		background: #fff;
	}

	// 卡片标题
	::v-deep .uni-section__header-title {
		font-size: 36rpx !important;
		font-weight: 600 !important;
		color: #0069cc !important;
	}

	::v-deep .uni-section__header {
		padding: 28rpx 30rpx !important;
		background: #f0f8ff !important;
		border-bottom: 1px solid #e0f0ff;
	}

	.example {
		padding: 40rpx 30rpx;
		background-color: #fff;
	}

	// 表单项
	.uni-forms-item {
		margin-bottom: 40rpx;

		// 表单标签
		::v-deep .uni-forms-item__label {
			font-size: 30rpx !important;
			font-weight: 500;
			color: #0069cc !important;
			// margin-bottom: 8rpx;
		}

		// 1. 通用容器样式 (边框、背景、圆角等)
		::v-deep .uni-easyinput__content,
		::v-deep .uni-select {
			border: 1px solid #d1e9ff !important;
			border-radius: 12rpx !important;
			background: #f9fcff !important;
			transition: all 0.3s;
			padding: 0 24rpx !important;

			&:focus-within,
			&.uni-select--open {
				border-color: #0069cc !important;
				box-shadow: 0 0 0 2px rgba(0, 105, 204, 0.2);
			}
		}

		// 2. 仅对单行输入框和下拉框应用固定高度
		::v-deep .uni-easyinput__content:not(.uni-easyinput__content-textarea),
		::v-deep .uni-select {
			height: 80rpx;
			line-height: 80rpx;
		}

		// 3. 仅对多行文本域（textarea）应用自己的样式
		::v-deep .uni-easyinput__content-textarea {
			height: auto !important;
			min-height: 200rpx;
			padding: 20rpx 24rpx !important;
			line-height: 1.6 !important;
		}

		// 4. 通用内部文字样式
		::v-deep .uni-input-input,
		::v-deep .uni-select__input-text,
		::v-deep .uni-textarea-textarea {
			font-size: 28rpx;
			color: #333;
		}

		::v-deep .uni-input-placeholder,
		::v-deep .uni-select__input-placeholder {
			color: #999 !important;
		}

		// 5. 禁用状态样式
		::v-deep .is-disabled {
			background-color: #f5f7fa !important;
			border-color: #e4e7ed !important;

			.uni-input-input {
				color: #c0c4cc !important;
			}
		}
	}

	// 提交按钮
	.submit-btn {
		background: linear-gradient(135deg, #0081ff, #0069cc);
		border: none;
		border-radius: 50rpx;
		height: 88rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		margin-top: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 105, 204, 0.3);
		transition: all 0.3s;

		&::after {
			border: none;
		}

		&:active {
			transform: translateY(4rpx);
			box-shadow: 0 4rpx 12rpx rgba(0, 105, 204, 0.3);
		}
	}
</style>